<template>
  <div v-for="(menuItem,index) in menuData" :key="menuItem[propsD.index]">
    <div v-if="props.showBeforeFn(menuItem)">
      <el-menu-item @click="props.clickFn(menuItem)"
                    v-if="!Boolean(menuItem[propsD.children]) || menuItem[propsD.children].length<=0"
                    :index="menuItem[propsD.index]">
        <slot name="icon" :data="menuItem">
            <span class="iconBox" v-if="menuItem[propsD.icon]">
              <icon-x :type="menuItem[propsD.icon]" size="16"/>
            </span>
        </slot>
        <!-- 没有子菜单 -->
        <template #title>
          <slot name="title" :data="menuItem">
            <span class="titleBox" v-if="menuItem[propsD.title]">
              <span class="title">{{ menuItem[propsD.title] }}</span>
            </span>
          </slot>
        </template>
      </el-menu-item>


      <!-- 父级菜单不触发clcikFn事件 -->
      <el-sub-menu v-else :index="menuItem[propsD.index]" :popper-class="props.popperClass">
        <!-- 有子菜单 -->
        <template #title>
          <slot name="icon" :data="menuItem">
            <span class="iconBox" v-if="menuItem[propsD.icon]">
              <icon-x :type="menuItem[propsD.icon]" size="16"/>
            </span>
          </slot>
          <span v-show="!props.collapse">
            <slot name="title" :data="menuItem">
            <span class="titleBox" v-if="menuItem[propsD.title]">
              <span class="title">{{ menuItem[propsD.title] }}</span>
            </span>
          </slot>
          </span>
        </template>
        <menu-x-item-one :clickFn="props.clickFn" :props="propsD" :data="menuItem[propsD.children]"
                         :popper-class="props.popperClass"
                         :showBeforeFn="props.showBeforeFn" :openFn="props.openFn">
          <template #title="{data}">
            <slot name="title" :data="data">
              <span class="titleBox" v-if="data[propsD.title]">
                <span class="title">{{ data[propsD.title] }}</span>
              </span>
            </slot>
          </template>
          <template #icon="{data}">
            <slot name="icon" :data="data">
            <span class="iconBox" v-if="data[propsD.icon]">
              <icon-x :type="data[propsD.icon]" size="16"/>
            </span>
            </slot>
          </template>
        </menu-x-item-one>
      </el-sub-menu>
    </div>
  </div>
</template>

<script setup>
import menuXItemOne from './xhykMenuItem.vue'
import IconX from '../xhykIcon.vue'
import {computed,ref,watch} from 'vue'
import { ElSubMenu,ElMenuItem } from 'element-plus'

const props = defineProps({
  // 菜单列表
  data: {
    type: Object,
    default: []
  },
  // 菜单对应属性
  props: {
    type: Object,
    default: {
      index: 'id', // 唯一标识
      title: 'name', // 菜单title
      icon: '', // 图标
      children: 'children' // 子菜单字段
    }
  },
  // 点击了子菜单项的回调事件
  clickFn: {
    type: Function,
    default: function (item) {
      console.log(item)
    }
  },
  // 显示菜单前回调函数
  showBeforeFn: {
    type: Function,
    default: item => {
      // console.log(item)
      return true
    }
  },
  // 菜单打开回调函数
  openFn: {
    type: Function,
    default: index => {
      // console.log(index)
    }
  },

  // 折叠
  collapse: {
    type: Boolean,
    default: false
  },

  popperClass: {
    type: String,
    default: ''
  },

})

const propsD = computed(() => {
  return {
    index: props.props.index || 'id',
    title: props.props.title || 'title',
    icon: props.props.icon || 'icon',
    children: props.props.children || 'children'
  }
})


// 设置标题和图标
const menuData = ref([])


watch(() => props.data, newV => {
  menuData.value = JSON.parse(JSON.stringify(newV))
}, {immediate: true, deep: true})

</script>

<style scoped lang='scss'>
.iconBox {
  width: 23px;
  height: 56px;
  display: flex;
  align-items: center;
  //justify-content: center;
  .xhAll {
    font-size: 16px !important;
    width: 24px;
    display: flex;
    justify-content: center;
    &:before {
      font-size: 16px !important;
    }
  }
}
</style>